<template>
    <view class="bg-gray-50 min-h-screen">
      <!-- 顶部导航 -->
      <view class="sticky top-0 z-50 bg-white shadow-sm">
        <view class="flex items-center justify-between px-[30rpx] py-[20rpx]">
          <view class="flex items-center space-x-[10rpx]">
            <IconFont name="location" size="28" color="#F97316" />
            <text class="text-lg font-medium">北京市</text>
          </view>
          <view class="flex items-center space-x-[20rpx]">
            <view class="flex items-center">
              <image src="https://picsum.photos/id/64/100/100" mode="aspectFill" class="w-[50rpx] h-[50rpx] rounded-full" />
              <view class="ml-[10rpx]">
                <text class="text-sm font-medium">张小明</text>
                <text class="text-xs text-gray-500">ID: 123456</text>
              </view>
            </view>
            <IconFont name="message" size="28" color="#6B7280" />
          </view>
        </view>
        
        <!-- 搜索栏 -->
        <view class="px-[30rpx] pb-[20rpx]">
          <nut-search 
            placeholder="搜索工作、技能、职位..." 
            class="bg-gray-100 rounded-full"
            :cancel-text="''"
            :show-action="false"
          />
        </view>
      </view>
      
      <!-- 广告轮播 -->
      <view class="relative h-[300rpx] overflow-hidden">
        <nut-swiper 
          class="w-full h-full" 
          :auto-play="true" 
          :interval="5000"
          :show-indicators="true"
          indicator-color="#ffffff"
          indicator-active-color="#F97316"
        >
          <nut-swiper-item>
            <image src="https://picsum.photos/id/26/750/300" mode="aspectFill" class="w-full h-full" />
          </nut-swiper-item>
          <nut-swiper-item>
            <image src="https://picsum.photos/id/28/750/300" mode="aspectFill" class="w-full h-full" />
          </nut-swiper-item>
          <nut-swiper-item>
            <image src="https://picsum.photos/id/42/750/300" mode="aspectFill" class="w-full h-full" />
          </nut-swiper-item>
        </nut-swiper>
      </view>
      
      <!-- 五大模块 -->
      <view class="py-[40rpx] px-[30rpx] bg-white">
        <text class="text-xl font-bold mb-[30rpx] block">快速入口</text>
        <view class="grid grid-cols-5 gap-[20rpx]">
          <!-- 日结区 -->
          <view class="flex flex-col items-center p-[15rpx] rounded-xl bg-blue-50 hover:bg-blue-100 transition-colors cursor-pointer">
            <view class="w-[80rpx] h-[80rpx] rounded-full bg-primary/10 flex items-center justify-center mb-[10rpx]">
              <IconFont name="calendar" size="36" color="#1E40AF" />
            </view>
            <text class="text-sm font-medium">日结区</text>
            <text class="text-xs text-gray-500">订单制</text>
          </view>
          
          <!-- 悬赏区 -->
          <view class="flex flex-col items-center p-[15rpx] rounded-xl bg-orange-50 hover:bg-orange-100 transition-colors cursor-pointer">
            <view class="w-[80rpx] h-[80rpx] rounded-full bg-accent/10 flex items-center justify-center mb-[10rpx]">
              <IconFont name="medal" size="36" color="#F97316" />
            </view>
            <text class="text-sm font-medium">悬赏区</text>
            <text class="text-xs text-gray-500">任务制</text>
          </view>
          
          <!-- 能力提升区 -->
          <view class="flex flex-col items-center p-[15rpx] rounded-xl bg-green-50 hover:bg-green-100 transition-colors cursor-pointer">
            <view class="w-[80rpx] h-[80rpx] rounded-full bg-green-100 flex items-center justify-center mb-[10rpx]">
              <IconFont name="school" size="36" color="#10B981" />
            </view>
            <text class="text-sm font-medium">能力提升</text>
            <text class="text-xs text-gray-500">培训考证</text>
          </view>
          
          <!-- 工厂招聘区 -->
          <view class="flex flex-col items-center p-[15rpx] rounded-xl bg-purple-50 hover:bg-purple-100 transition-colors cursor-pointer">
            <view class="w-[80rpx] h-[80rpx] rounded-full bg-purple-100 flex items-center justify-center mb-[10rpx]">
              <IconFont name="factory" size="36" color="#8B5CF6" />
            </view>
            <text class="text-sm font-medium">工厂招聘</text>
            <text class="text-xs text-gray-500">长期稳定</text>
          </view>
          
          <!-- 特殊类招聘区 -->
          <view class="flex flex-col items-center p-[15rpx] rounded-xl bg-pink-50 hover:bg-pink-100 transition-colors cursor-pointer">
            <view class="w-[80rpx] h-[80rpx] rounded-full bg-pink-100 flex items-center justify-center mb-[10rpx]">
              <IconFont name="star" size="36" color="#EC4899" />
            </view>
            <text class="text-sm font-medium">特殊招聘</text>
            <text class="text-xs text-gray-500">灵活多样</text>
          </view>
        </view>
      </view>
      
      <!-- 能力提升区详情 -->
      <view class="py-[40rpx] px-[30rpx] bg-neutral">
        <text class="text-xl font-bold mb-[30rpx] block">能力提升区</text>
        <view class="grid grid-cols-3 gap-[20rpx]">
          <nut-card 
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #cover>
              <image src="https://picsum.photos/id/20/250/150" mode="aspectFill" class="w-full h-[160rpx]" />
            </template>
            <template #title>
              <text class="font-medium text-sm">职业考证</text>
            </template>
            <template #content>
              <text class="text-xs text-gray-500">获取行业认证，提升竞争力</text>
            </template>
          </nut-card>
          
          <nut-card 
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #cover>
              <image src="https://picsum.photos/id/21/250/150" mode="aspectFill" class="w-full h-[160rpx]" />
            </template>
            <template #title>
              <text class="font-medium text-sm">技能传承</text>
            </template>
            <template #content>
              <text class="text-xs text-gray-500">老师傅一对一指导，快速掌握</text>
            </template>
          </nut-card>
          
          <nut-card 
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #cover>
              <image src="https://picsum.photos/id/22/250/150" mode="aspectFill" class="w-full h-[160rpx]" />
            </template>
            <template #title>
              <text class="font-medium text-sm">特长培训</text>
            </template>
            <template #content>
              <text class="text-xs text-gray-500">挖掘潜力，培养市场稀缺技能</text>
            </template>
          </nut-card>
        </view>
      </view>
      
      <!-- 悬赏区展示 -->
      <view class="py-[40rpx] px-[30rpx] bg-white">
        <view class="flex justify-between items-center mb-[30rpx]">
          <text class="text-xl font-bold">热门悬赏</text>
          <navigator url="#" class="text-primary text-sm flex items-center">
            查看全部 <IconFont name="arrow-right" size="16" color="#1E40AF" class="ml-[5rpx]" />
          </navigator>
        </view>
        
        <view class="space-y-[20rpx]">
          <!-- 悬赏任务1 -->
          <nut-card 
            class="bg-white rounded-xl p-[20rpx] shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #title>
              <view class="flex justify-between items-start">
                <text class="font-medium">网站UI设计优化</text>
                <text class="bg-accent/10 text-accent text-xs font-medium px-[10rpx] py-[5rpx] rounded-full">¥3000</text>
              </view>
            </template>
            <template #content>
              <view>
                <text class="text-xs text-gray-500 mt-[5rpx] block">发布于 2小时前 · 北京</text>
                <text class="text-sm text-gray-600 mt-[10rpx] block line-clamp-2">需要一位有经验的UI设计师对我们的企业网站进行全面优化，包括配色方案、交互设计和响应式布局。要求提供设计稿和切图。</text>
              </view>
            </template>
            <template #footer>
              <view class="flex justify-between items-center">
                <view class="flex items-center">
                  <image src="https://picsum.photos/id/65/100/100" mode="aspectFill" class="w-[30rpx] h-[30rpx] rounded-full" />
                  <text class="text-xs text-gray-500 ml-[10rpx]">科技有限公司</text>
                </view>
                <text class="text-xs text-gray-500">截止日期: 7月15日</text>
              </view>
            </template>
          </nut-card>
          
          <!-- 悬赏任务2 -->
          <nut-card 
            class="bg-white rounded-xl p-[20rpx] shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #title>
              <view class="flex justify-between items-start">
                <text class="font-medium">短视频拍摄与剪辑</text>
                <text class="bg-accent/10 text-accent text-xs font-medium px-[10rpx] py-[5rpx] rounded-full">¥1500</text>
              </view>
            </template>
            <template #content>
              <view>
                <text class="text-xs text-gray-500 mt-[5rpx] block">发布于 5小时前 · 上海</text>
                <text class="text-sm text-gray-600 mt-[10rpx] block line-clamp-2">需要拍摄并剪辑5条产品宣传短视频，要求有创意和吸引力，能够突出产品特点。有电商视频制作经验者优先。</text>
              </view>
            </template>
            <template #footer>
              <view class="flex justify-between items-center">
                <view class="flex items-center">
                  <image src="https://picsum.photos/id/66/100/100" mode="aspectFill" class="w-[30rpx] h-[30rpx] rounded-full" />
                  <text class="text-xs text-gray-500 ml-[10rpx]">时尚品牌</text>
                </view>
                <text class="text-xs text-gray-500">截止日期: 7月12日</text>
              </view>
            </template>
          </nut-card>
          
          <!-- 悬赏任务3 -->
          <nut-card 
            class="bg-white rounded-xl p-[20rpx] shadow-sm hover:shadow-md transition-shadow"
            :is-hover="true"
          >
            <template #title>
              <view class="flex justify-between items-start">
                <text class="font-medium">Python数据分析</text>
                <text class="bg-accent/10 text-accent text-xs font-medium px-[10rpx] py-[5rpx] rounded-full">¥2500</text>
              </view>
            </template>
            <template #content>
              <view>
                <text class="text-xs text-gray-500 mt-[5rpx] block">发布于 1天前 · 广州</text>
                <text class="text-sm text-gray-600 mt-[10rpx] block line-clamp-2">需要一名Python数据分析师对我们的销售数据进行分析，制作数据可视化报表，并提供数据分析建议。要求熟悉Pandas、NumPy等库。</text>
              </view>
            </template>
            <template #footer>
              <view class="flex justify-between items-center">
                <view class="flex items-center">
                  <image src="https://picsum.photos/id/67/100/100" mode="aspectFill" class="w-[30rpx] h-[30rpx] rounded-full" />
                  <text class="text-xs text-gray-500 ml-[10rpx]">数据科技公司</text>
                </view>
                <text class="text-xs text-gray-500">截止日期: 7月20日</text>
              </view>
            </template>
          </nut-card>
        </view>
      </view>
      
      <!-- 平台服务入口 -->
      <view class="py-[40rpx] px-[30rpx] bg-neutral">
        <text class="text-xl font-bold mb-[30rpx] block">平台服务</text>
        <view class="grid grid-cols-2 gap-[20rpx]">
          <!-- 成为平台商家 -->
          <nut-cell 
            :is-link="true"
            title="成为平台商家"
            :value="`发布任务，招募专业人才，快速解决问题`"
            :is-required="false"
            class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-xl p-[30rpx] text-white shadow-lg hover:shadow-xl transition-shadow"
            :title-style="{color: '#ffffff', fontWeight: 'bold', fontSize: '32rpx'}"
            :value-style="{color: '#e0e7ff', fontSize: '28rpx', marginTop: '10rpx'}"
            :arrow-style="{color: '#ffffff'}"
          >
            <template #icon>
              <IconFont name="shop" size="36" color="#ffffff" />
            </template>
          </nut-cell>
          
          <!-- 成为平台从业者 -->
          <nut-cell 
            :is-link="true"
            title="成为平台从业者"
            :value="`发挥专业技能，接取合适任务，获取丰厚报酬`"
            :is-required="false"
            class="bg-gradient-to-r from-green-600 to-teal-600 rounded-xl p-[30rpx] text-white shadow-lg hover:shadow-xl transition-shadow"
            :title-style="{color: '#ffffff', fontWeight: 'bold', fontSize: '32rpx'}"
            :value-style="{color: '#d1fae5', fontSize: '28rpx', marginTop: '10rpx'}"
            :arrow-style="{color: '#ffffff'}"
          >
            <template #icon>
              <IconFont name="user" size="36" color="#ffffff" />
            </template>
          </nut-cell>
          
          <!-- 信息 -->
          <nut-cell 
            :is-link="true"
            title="平台信息"
            :value="`了解平台规则、政策和最新动态`"
            :is-required="false"
            class="bg-gradient-to-r from-amber-600 to-orange-600 rounded-xl p-[30rpx] text-white shadow-lg hover:shadow-xl transition-shadow"
            :title-style="{color: '#ffffff', fontWeight: 'bold', fontSize: '32rpx'}"
            :value-style="{color: '#fff7ed', fontSize: '28rpx', marginTop: '10rpx'}"
            :arrow-style="{color: '#ffffff'}"
          >
            <template #icon>
              <IconFont name="info" size="36" color="#ffffff" />
            </template>
          </nut-cell>
          
          <!-- 联系我们 -->
          <nut-cell 
            :is-link="true"
            title="联系我们"
            :value="`有问题？请随时联系我们的客服团队`"
            :is-required="false"
            class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl p-[30rpx] text-white shadow-lg hover:shadow-xl transition-shadow"
            :title-style="{color: '#ffffff', fontWeight: 'bold', fontSize: '32rpx'}"
            :value-style="{color: '#fce7f3', fontSize: '28rpx', marginTop: '10rpx'}"
            :arrow-style="{color: '#ffffff'}"
          >
            <template #icon>
              <IconFont name="phone" size="36" color="#ffffff" />
            </template>
          </nut-cell>
        </view>
      </view>
      
      <!-- 底部导航 -->
      <nut-tabbar class="fixed bottom-0 left-1/2 -translate-x-1/2 w-[750rpx] bg-white border-t border-gray-200 z-40">
        <nut-tabbar-item icon="home" text="首页" active />
        <nut-tabbar-item icon="briefcase" text="全部职位" />
        <nut-tabbar-item icon="user" text="我的" />
        <nut-tabbar-item icon="setting" text="更多" />
      </nut-tabbar>
    </view>
  </template>
  
  <script setup>
  import { onLoad } from '@tarojs/taro'
  import { IconFont } from '@nutui/icons-vue-taro'
  import { NutSearch, NutSwiper, NutSwiperItem, NutCard, NutCell, NutTabbar, NutTabbarItem } from '@nutui/nutui-taro'
  
  // 注册NutUI组件
  const components = {
    NutSearch,
    NutSwiper,
    NutSwiperItem,
    NutCard,
    NutCell,
    NutTabbar,
    NutTabbarItem,
    IconFont
  }
  
  // 页面加载时的初始化逻辑
  onLoad(() => {
    console.log('页面加载完成')
  })
  </script>
  
  <style lang="scss" scoped>
  @unocss-placeholder;
  
  /* 自定义样式 */
  .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
  }
  
  .from-blue-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-to: rgba(37, 99, 235, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-indigo-600 {
    --tw-gradient-to: #4f46e5;
  }
  
  .from-green-600 {
    --tw-gradient-from: #16a34a;
    --tw-gradient-to: rgba(22, 163, 74, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-teal-600 {
    --tw-gradient-to: #0d9488;
  }
  
  .from-amber-600 {
    --tw-gradient-from: #d97706;
    --tw-gradient-to: rgba(217, 119, 6, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-orange-600 {
    --tw-gradient-to: #ea580c;
  }
  
  .from-purple-600 {
    --tw-gradient-from: #9333ea;
    --tw-gradient-to: rgba(147, 51, 234, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  
  .to-pink-600 {
    --tw-gradient-to: #db2777;
  }
  </style>    